<template>
  <!-- 战绩消息 -->
  <div class="battle-bubble" @click="onImageClicked">
    <div class="content">
      <img :src="chat.content.msgContent" alt=""  @click="onImageClicked"> 
    </div>
    <!-- <div class="battle-preview flex-center" v-if="showPreview"  @click="showPreview = false">
      <img :src="chat.content.msgContent" alt=""  @click="showPreview = false">
    </div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
declare const $Vue: Vue;

// 分享的战绩图片

@Component
export default class MessageBattle extends Vue {

  @Prop({})
  chat: any;

  private showPreview: boolean = false;

  protected mounted() {
    console.error('MessageBattle', this.chat);
  }

  private onImageClicked() {
    $Vue.$emit('onImagePreview', this.chat.content.msgContent);
  }
}
</script>

<style lang="stylus" scoped>
.battle-bubble
  width 100%
  height 200px
  display flex
  justify-content center
  align-items center
  padding 8px
  box-sizing: border-box;
  margin 12px 0
  .content
    background #dedede
    padding 4px 10px
    color #575757
    font-size 12px
    border-radius 4px
    img 
      width 120px
.battle-preview 
  position fixed
  width 100% 
  height 600px
  top 0 
  left 0 
  background black 
  z-index 999
  img 
    width 100%
</style>

